<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Login</title>
  <link rel="stylesheet" href="./css/layui.css">
  <link rel="stylesheet" href="./css/custom/loginf.css">
  <script src="js/jquery-3.5.1.min.js"></script>
  <script src="js/layui.all.js" type="text/javascript" charset="utf-8"></script>
  <script src="lay/modules/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="../xinhua/js/jquery-cookie-master/src/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
  <!-- <script src="./js/form.js"></script> -->
  <style>
	  .html.body{
		  width: 100%;
		  height: 100%;
	  }
	  .body{
		background-image: url(./images/background.png); 
		background-size:cover;
		background-repeat: no-repeat;
		 /* position:relative; */
	  }
	  .imgs{
		  width:50%;
		  height:50%;
	  } 
	  .custom-h2{
		color: "#85d9ff";
	  }
	  
	  .custom-a{
		  color: #595cff;
	  }
	  .custom-a:hover{
		  color: #a1cff7;
	  }
	  .custom-input{
		  border-width: 0px;
		  outline:none;
		  background-color: inherit;
		  border-bottom: #FFFFFF;
	  }
	  .divs{
		  position: inherit;
		  margin-left: 30px;
		  width: 400px;
		  /* height: 80%; */
		  border-bottom: 1px solid #007DDB;;
	  }
	  .div:hover{
		  
		  border-bottom:1px solid #01AAED;
	  }
	  .div.foucus{
		  border-bottom:1px solid #FFFFFF ;
	  }
	  .custom-label{
		  width: 36px; 
		  text-align: left;
		  margin-left: 0;
	  }
	  .custom-div{
		 /* margin-left: 0; */
		  width: 60%;
	  }
	  .button{
		  margin-left: 28px;
		  width: 350px;
		  border-radius:20px;
	  }
	  .custom-input{
		  color: #dddddd;
	  }
	  .custom-input::-webkit-input-placeholder{
	  			color:#01AAED;
				opacity: 0.6;
	   }
	  .custom-input::-moz-placeholder{   /* Mozilla Firefox 19+ */
	  			color:#01AAED;
				opacity: 0.6;
	   }
	  .custom-input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
	        color:#01AAED;
			opacity: 0.6;
	   }
	   .custom-input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
	        color:#01AAED;
			opacity: 0.6;
	    }
		.custom-span1{
			margin-left: 170px;
		}
		.custom-span1:hover{
			color: #86bdff;
		}
  </style>
</head>
<body class="layui-layout-body body" onload="loadXMLDoc('http://116.62.175.87:5000/verifyCode')">
<div class="layui-layout layui-layout-admin "  >
  <div class="layui-header" style="background:rgba(0, 0, 100, 0.5); ">
    <!-- <div class="layui-logo">layui 后台布局</div> -->
    <!-- 头部区域（可配合layui已有的水平导航） -->
	<ul class="layui-nav" style="position:absolute!important;left:240px;top:0;;">
	   <li class="layui-nav-item">
		<img src="images/logo/logo.png" width="100px" height="80%"/>
	   </li> 
	</ul>
    <ul class="layui-nav layui-layout-left">
	  
      <li class="layui-nav-item"><a href="../xinhua/last_shouye.html">首页</a></li>
      <li class="layui-nav-item"><a href="dataInterface.html">数据接口</a></li>
      <li class="layui-nav-item"><a href="../xinhua/test/html">测试工具</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">EN</a>
        <!-- <dl class="layui-nav-child"> -->
         <!-- / <dd><a href="">邮件管理</a></dd> -->
          <!-- <dd><a href="">消息管理</a></dd> -->
          <!-- <dd><a href="">授权管理</a></dd> -->
        <!-- </dl> -->
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right" style="background-image: url(./images/buttonimage/details-bg.png);background-repeat:no-repeat;background-position:center;background-size:80%;">
      <li  class="layui-nav-item">
        <a href="login.html">
        登陆
        </a>
      </li>
	  <li  class="layui-nav-item">
	    <a href="regist.html">
	    注册
	    </a>
	  </li>
      
    </ul>
  </div>
  <div class="layui-body" >
	  
	 <!-- 注册 -->
	  <div class="gcs-loginx" style="background: rgba(0, 85, 127, 0.3); margin-top: 30px; ">
		  	  
		  	  <div class="gcs-login-panel" >
		  	  
		  	 <div class="login-title" style="margin-top: 52px;margin-left: 36px; float: left; ">
		  	  
		  	  <h2 class="custom-h2" >注册</h2>
		  	  
		  	  </div>
		  	  <div class="login-title" style="margin-top: 62px;float: left; margin-left: 216px;">
				  <a class="custom-a" href="login.html" >已有账号立即登录 ></a>
		  	  </div>
		  	<!--写成form会自动刷新，但是不写成form又很奇怪-->  
		  	<div id="formReg" class="layui-form" action="">
		  		
		  	  <div class="layui-form-item divs div" style="margin-top:122px;">
		  	    <label class="layui-form-label custom-label">
		  			<img src="./images/phone-icon.png" class="imgs"/>
		  		</label>
		  	    <div class="layui-input-inline custom-div">
		  	      <input type="text" name="name" id="name" required lay-verify="required|phone" placeholder="请输入手机号/邮箱" autocomplete="off" class="layui-input custom-input" >
				</div>
		  	  </div>
			  
		  	  
		  	  <div class="layui-form-item divs div">
		  		<label class="layui-form-label custom-label ">
		  		  <img src="./images/password-icon.png" class="imgs"/>
		  		</label>
		  	    <div class="layui-input-inline custom-div">
		  	      <input type="text" id="code" name="code" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input custom-input">
				</div>
				<img id="verifyCode" src="http://116.62.175.87:5000/verifyCode" onclick="changeImg()" onload="" style="position: absolute; top: 195px; left: 305px;">
				
		  	  </div>
		  	  
			  <div class="layui-form-item divs div">
			  		  		<label class="layui-form-label custom-label ">
			  		  		  <img src="./images/password-icon.png" class="imgs"/>
			  		  		</label>
			    <div class="layui-input-inline custom-div">
			      <input type="password" id="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input custom-input">
			    </div>
			  </div>
			  
			  <div class="layui-form-item divs div">
			  		  		<label class="layui-form-label custom-label ">
			  		  		  <img src="./images/password-icon.png" class="imgs"/>
			  		  		</label>
			    <div class="layui-input-inline custom-div">
			      <input type="password" id="password_s" name="password_s" required lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input custom-input">
			    </div>
			  </div>
			  
		  	  <div class="layui-form-item">
		  	    <div class="layui-input-block" style="margin-left: 28px;">
		  	      <button class="layui-btn button" id="submit" onclick="register()" >立即登录</button>
		  	      <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
		  	    </div>
		  	  </div>
		  	  
		  	</div>
		  </div>
		  	</div>
		  	  
  <!-- <div style="position:fixed;left:0;right:0;bottom:0;height:40px;line-height:44px;padding:0 15px;background-color:#393939">
    <!-- 底部固定区域 -->
    <!-- © layui.com - 底部固定区域 -->
  <!-- </div> --> -->
	</div>
</div>

<script>
	var url = "http://116.62.175.87:5000/user/register";
	function register() {
	    var name = document.getElementById("name").value;
	    var pwd = document.getElementById("password").value;
	    var pwd_s = document.getElementById("password_s").value;
	    var code = document.getElementById("code").value;
	    var phone = name;
	
	    $.ajax({
	        method: "POST",
	        url: url,
			 datatype: "JSON",
	        contentType: 'application/json',
	        data: JSON.stringify({
	            "name": name,
	            "password": pwd,
	            "password_s": pwd_s,
	            "phone": phone,
	            "code": code
	        }),
	
	        success: function (data) {
	            console.log(data);
				 if(data.code=='200'){
					 alert("注册成功，请前去登录页登录");
					 window.location.href="login.html"
				 }else if(data.code=='401'){
					 alert("密码格式不正确，请重新输入");
				 }else if(data.code=='402'){
					 alert("两次密码不一致，请重新输入");
				 }else if(data.code=='405'){
					 alert("验证码错误，请重新输入");
				 }else if(data.code=='403'){
					 alert("该用户已注册，请登录");
				 }
	        }
	    })
	
	};
	function changeImg(){
		var verifyCode = document.getElementById("verifyCode");
		var num=Math.ceil(Math.random()*10);//生成一个随机数（防止缓存）
		verifyCode.src= "http://116.62.175.87:5000/verifyCode?"+num;
	//	var verifyUrl = verifyCode.src;
	//	verify(verifyUrl);
	}
	function showCookie(){
		var co = $.cookie('verifyCode');
		console.log("sss  "+co);
	}
	var xmlhttp;
	  function loadXMLDoc(url)
	  {
	  xmlhttp=null;
	  if (window.XMLHttpRequest)
	    {// code for Firefox, Opera, IE7, etc.
	    xmlhttp=new XMLHttpRequest();
	    }
	  else if (window.ActiveXObject)
	    {// code for IE6, IE5
	    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	    }
	  if (xmlhttp!=null)
	    {
	    xmlhttp.open("GET",url,true);
		xmlhttp.onreadystatechange=state_Change;
	    xmlhttp.send(null);
	    }
	  else
	    {
	    alert("Your browser does not support XMLHTTP.");
	    }
	  }
	  
	  function state_Change()
	  {
	  if (xmlhttp.readyState==4)
	    {// 4 = "loaded"
	    if (xmlhttp.status==200)
	      {// 200 = "OK"
			console.log(xmlhttp.getAllResponseHeaders());
	      }
	    else
	      {
	      alert("Problem retrieving data:" + xmlhttp.statusText);
	      }
	    }
	  }
	
	function changeImg(){
	//	var verifyUrl = "http://116.62.175.87:5000/verifyCode?"+Math.random();
		$.ajax({
		    method: "GET",
		    url: verifyUrl,
			 datatype: "JSON",
		    contentType: 'application/json',
		    success: function (data) {
					 console.log("刷新success");
				//	 var vcode = responseHeaders.code;
				//	 console.log(vcode);
				//	 $("#verifyCode").attr('src',path);
		    },
			error: function(data){
				console.log("failed  "+data);
			}
		});
	}
	//获取cookie 
	function getCookie(c_name){
	　　　　if (document.cookie.length>0){　　//先查询cookie是否为空，为空就return ""
	　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
	　　　　　　if (c_start!=-1){ 
	　　　　　　　　c_start=c_start + c_name.length+1　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
	　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
	　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
	　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
	　　　　　　} 
	　　　　}
	　　　　return document.cookie.length;
	　　}
	         
		 $(document).ready(function(){  
		        var skey = getCookie("verifyCode");  
		        console.log("通过getCookie('verifyCode')获得的document.cookie为"+skey);  
				var c = JSON.stringify($.cookie()) ;
				console.log("JSON.stringify($.cookie())的值为"+c);
		    });
	

</script>
<script>
	/*
	var verifyCode = document.getElementById('verifyCode');
	var verifyUrl = "http://116.62.175.87:5000/verifyCode";
	$.ajax({
	    method: "GET",
	    url: verifyUrl,
		datatype: "JSON",
		contentType: 'image/jpeg;charset=UTF-8',
		type: 'HEAD',
	//	async: false,
		beforeSend: function(xhr){
			xhr.withCredentials = true;
		},
	//	crossDomain: true,
	    success: function (data,response) {
				console.log(JSON.parse(JSON.stringify(data)));
				console.log(response.getResponseHeader('Set-Cookie'));
				 console.log("success verify");
				 
			//	verifyCode.src =  'data:image/png;base64,' + (response.data).toString('base64');
	    },
		error: function(data){
			console.log("failed  "+data);
		}
	});
	function changeImg(){
		var num=Math.ceil(Math.random()*10);//生成一个随机数（防止缓存）
		verifyCode.src= "http://116.62.175.87:5000/verifyCode?"+num;
		var verifyUrl = verifyCode.src;
		verify(verifyUrl);
	}
	function verify(url){
		$.ajax({
		    method: "GET",
		    url: "http://116.62.175.87:5000/verifyCode",
			datatype: "JSON",
		//    contentType: 'application/json',
			async: false,
			beforeSend: function(xhr){
				xhr.withCredentials = true;
			},
			crossDomain: true,
		    success: function (response) {
					 console.log("验证码success");
		    },
			error: function(data){
				console.log("failed  "+data);
			}
		});
	}*/
</script>

<!-- <script>
	function login() {
	           $.ajax({
	           //几个参数需要注意一下
	               type: "POST",//方法类型
	               dataType: "json",//预期服务器返回的数据类型
	               url: "http://xx.com/user/register" ,//url
	               data: $('#formReg').serialize(),
	               success: function (result) {
	                   console.log(result);//打印服务端返回的数据(调试用)
	                   if (result.resultCode == 200) {
	                       alert("SUCCESS");
	                   }
	                   ;
	               },
	               error : function() {
	                   alert("异常！");
	               }
	           });
	       }
</script> -->
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>

</body>
</html>